<!-- 党务引领 -->
<template>
    <div class="party-container">
        <Title :title="title" :subtitle="subtitle" />
        <div class="party-content">
            <div class="party-left">
                <Swiper :swiperList="swiperList" :activeTab="activeTab" />
            </div>
            <div class="party-right">
                <div class="tab-wrapper">
                    <div class="tab-header">
                        <button v-for="tab in tabs" :key="tab.id" :class="{ active: activeTab === tab.routerPath }"
                            @click="activeTab = tab.routerPath">
                            {{ tab.name }}
                        </button>
                    </div>
                    <div class="tab-content">
                        <ul class="news-list">
                            <li v-for="item in currentTabData" :key="item.id">
                                <NuxtLink :to="localePath(`/party/${activeTab}/${item.id}`)" class="news-item">
                                    <span class="title">{{ item.title }}</span>
                                    <span class="date">{{ formatDate(item.created) }}</span>
                                </NuxtLink>
                            </li>
                        </ul>
                        <NuxtLink :to="localePath(`/party/${activeTab}`)" class="more-link">更多<span>&gt;&gt;</span>
                        </NuxtLink>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import Title from '@/components/index/Title.vue'
import Swiper from '@/components/Swiper.vue'
const { $fetchGov } = useNuxtApp()
const nuxtApp = useNuxtApp()
import { formatDate } from '@/utils/date'
const localePath = useLocalePath();

const { data: party } = await useAsyncData(`party-${new Date().getTime()}`, () => $fetchGov('/app/api/channel/alias/party', {
    method: 'GET',
    params: {
        isArticle: true,
        isTree: true,
        articleTotal: 7,
        _t: Date.now() // 添加时间戳
    }
})
)

const tabs = computed(() => {
    return party.value?.data?.children || [];
});

//当前活动的tab
const activeTab = ref(tabs.value[0]?.routerPath || 'news');

const swiperList = computed(() => {
    const currentArticles = tabs.value.find(t => t.routerPath === activeTab.value)?.articleList || []
    return currentArticles.slice(0, 3).map(item => ({
        id: item.id,
        image: item.image,
        title: item.title
    }))
})


const currentTabData = computed(() => {
    const currentArticles = tabs.value.find(t => t.routerPath === activeTab.value)?.articleList || []
    return currentArticles
})



const title = computed(() => {
    return party.value?.data?.name || '';
});
const subtitle = ref('Party leadership')


</script>
<style scoped lang="scss">
@use '@/assets/scss/main' as *;

.party-container {
    width: 100%;
    height: 100%;
    .party-content {
        width: 1200px;
        height: 100%;
        display: flex;
        margin: 1.5rem auto 0;

        .party-left {
            width: 48%;
            height: 100%;
            background: #fff;
            margin-right: 2%;
        }

        .party-right {
            width: 50%;
            height: 100%;
            background: #fff;

            // Tab切换样式
            .tab-wrapper {
                background: white;
                border-radius: 5px;
                box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

                .tab-header {
                    display: grid;
                    grid-template-columns: repeat(5, 1fr);
                    border-bottom: 1px solid #f0f0f0;
                    padding: 0 1rem;

                    button {
                        padding: .7rem;
                        border: none;
                        background: none;
                        cursor: pointer;
                        font-size: 1.1rem;
                        // transition: all 0.5s;


                        &.active {
                            color: #1867CA;
                            // font-weight: bold;
                            border-bottom: 1px solid #1867CA;
                            margin-bottom: -1px;
                        }
                    }
                }

                .news-list {
                    padding: 0 1rem;
                    list-style: none;

                    .news-item {
                        display: flex;
                        justify-content: space-between;
                        padding: 0.65rem 0;
                        color: #333;
                        text-decoration: none;
                        border-bottom: 1px solid #eee;
                        font-size: 1rem;

                        .title {
                            width: 80%;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        &:hover {
                            color: $myprimary-color;
                        }

                        .date {
                            color: #666;
                            font-size: 0.9rem;
                        }
                    }
                }

                .more-link {
                    display: block;
                    padding: .7rem;
                    text-align: right;
                    font-size: 1rem;
                    color: $myprimary-color;
                    text-decoration: none;

                    span {
                        margin-left: 5px;
                        vertical-align: 1px;
                    }
                }
            }
        }
    }
    @media screen and (max-width: 768px) {
        .party-content {
            margin:1rem 0;
            display: block;
            width:100%;
            .party-left {
                width:100%;
                margin-right: 0;
            }
            .party-right {
                width:100%;
                margin-top:1rem;
                .tab-header{
                    button{
                        font-size:.9rem !important;
                    }
                }
                .tab-content{
                    .news-list{
                        padding:0 .5rem;
                        .news-item{
                            padding:0.7rem 0;
                            font-size:.85rem;
                            .title{
                                width:75%;
                            }
                            .date{
                                font-size:.85rem;
                            }
                        }
                    }
                    .more-link{
                        padding:.7rem;
                        font-size:.85rem;
                    }
                }
            }
        }
    }
}
</style>